@model EventHub.Web.Pages.Organizations.Components.MembersArea.MembersAreaViewComponent.MembersAreaViewComponentModel
<h5 class="detail-head mt-3 font-weight-bold" data-is-more-detail="@Model.IsMoreDetail" data-is-pagination="@Model.IsPagination" data-organization-id="@Model.OrganizationId" data-hash-code="@Model.GetHashCode()" data-total-count="@Model.TotalCount" data-skip-count="@Model.SkipCount" data-max-result-count="@Model.MaxResultCount">
    Members 
    @if (Model.IsMoreDetail)
    {
        <span class="badge badge-primary">@Model.TotalCount</span>
    }
    else
    {
        <span>(@Model.TotalCount)</span>
    }
</h5>
@if (Model.TotalCount > 0)
{
    <div id="MemberList-@Model.GetHashCode()" class="row">
        <partial name="~/Pages/Organizations/Components/MembersArea/_memberListSection.cshtml" model="@Model.Members"/>
    </div>
}
else
{
    <p>There is no member</p>
}

@if (Model.IsPagination && Model.TotalCount > Model.MaxResultCount && Model.TotalCount > Model.Members.Count)
{
    <div id="load-more-section-@Model.GetHashCode()">
        <button
            id="LoadMoreButton-@Model.GetHashCode()"
            class="btn btn-secondary btn-lg mt-3"
            data-url="@Url.Action("GetList", "OrganizationMembership", new { organizationId = Model.OrganizationId, maxResultCount = Model.MaxResultCount})">
            Show More
        </button>
    </div>
}